require('./home.less')
require('../../assets/css/reset.css')
require('../../assets/css/normalize.css')
require('../../assets/iconf/iconfont.css')

require('../../assets/css/basic.less')
let footer = require('../../lib/utlis/footer')
let axios = require('axios')
footer.footer('home')

// 获取登录时储存的用户信息
let user = JSON.parse(localStorage.getItem('login'))
// 设置axios请求头,添加token
axios.defaults.headers.authorization = "Bearer " + user.token;

let todayRank = document.querySelector('.todayRank')
let badges = document.querySelector('.badges')
let keepNum = document.querySelector('.keepNum')
let todayCard = document.querySelector('.todayCard')
require('../../lib/swiper-bundle.min.css')
const Swiper = require('../../lib/swiper-bundle.min.js')


var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    autoplay: {
        delay: 2000,
        disableOnInteraction: false,
    }
})
axios.get('http://47.96.154.185:3701/api/user/info')
    .then(function (res) {
        if (res.data.errno == 0) {
            todayRank.textContent = res.data.data.ranking
            badges.textContent = res.data.data.badges
            keepNum.textContent = res.data.data.clockCount
        }
    })
    .catch(function (err) { })


// 5.将用户是否打卡的参数取出 放到全局
let isClockIn = false
// 1.发送请求询问后台用户是否已经打卡
axios.get('http://47.96.154.185:3701/api/user/clockInInfo')
    .then(function (res) {
        // 6.将用户打卡情况取出
        isClockIn = res.data.data.isClockIn
        if (res.data.errno == 0) {
            // 2.判断用户是否打卡
            if (res.data.data.isClockIn == true) {
                // 3.显示已打卡
                todayCard.textContent = '已打卡'
                todayCard.style.color = '#999'
                todayCard.style.border = '3px solid #999'
            } else {
                // 4.显示未打卡
                todayCard.textContent = '今日未打卡'
                todayCard.style.color = 'rgb(7, 98, 155)'
                todayCard.style.border = '3px solid rgb(7, 98, 155)'
            }
        }
    })
    .catch(function () { })

todayCard.addEventListener('click', function () {
    // 7.判断用户是否未打卡
    if (isClockIn == false){
        // 8.如果用户未打卡，就发送请求打卡
        axios.post('http://47.96.154.185:3701/api/user/ClockIn')
            .then(function (res) {
                if (res.data.errno == 0) {
                    // 9.打卡成功后，重置按钮样式
                    todayCard.textContent = '已打卡'
                    todayCard.style.color = '#999'
                    todayCard.style.border = '3px solid #999'
                    todayCard.textContent = todayCard.textContent -0+1
                    // 10.重置用户是否打卡变量
                    isClockIn = true
                }
            })
    }
})